<template>
  <div class="manager-container">
    <!-- 搜索条件开始-->
    <el-row :gutter="20">
      <!-- 搜索条件开始 -->
      <el-col :span="18">
        <el-form :model="queryParams" ref="queryForm" :inline="true" class="manager-search">
          <!-- 替换内容块开始 -->
          <el-col :span="10">
            <el-form-item label="产品名称" prop="origin">
              <el-input
                v-model="queryParams.productName"
                placeholder="请输入关键词"
                clearable
                style="width: 190px"
                @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-col>
          <!-- 替换内容块结束 -->
          <el-col :span="1.5">
            <el-button type="primary" @click="handleQuery" size="default">
              <i class="iconfont icon-chaxun btn-icon">查询</i>
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button @click="resetQuery" size="default">
              <i class="iconfont icon-chongzhi btn-icon">重置</i>
            </el-button>
          </el-col>
        </el-form>
      </el-col>
      <!-- 搜索条件结束 -->
      <!-- 工具条开始 -->
      <el-col :span="6">
        <el-row :gutter="20" style="float: right">
          <el-col :span="1.5">
            <!-- 替换内容块开始 -->
            <el-button type="primary" @click="handleAdd" size="default">
              <i class="iconfont icon-tianjia btn-icon">添加</i>
            </el-button>
          </el-col>			
          <el-col :span="1.5">
            <el-button type="primary" @click="handleExport" size="default">
              <i class="iconfont icon-daochu btn-icon">导出</i>
            </el-button>
          </el-col>
          <!-- 替换内容块结束 -->
        </el-row>
      </el-col>
      <!-- 工具条结束 -->
    </el-row>
    <!-- 搜索条件结束-->
    <!-- 主页面开始 -->
    <div class="table-list">
      <el-row :gutter="20" class="main-row">
        <!-- 表格开始 -->
        <el-col :span="24">
          <el-table
            :data="tableList"
            v-loading="loading"
            class="menu-table"
            height="550"
            :header-cell-style="{background:'#f3f3f3'}"
            bproductType
          >
		   <el-table-column label="序号" width="80" type="index" align="center"/>
			<el-table-column
			  label="商品名称"
			  :show-overflow-tooltip="true"
			  prop="productName"
			  align="center"
			>
			</el-table-column>
			<el-table-column
			  label="商品价格"
			  :show-overflow-tooltip="true"
			  prop="price"
			  align="center"
			>
			</el-table-column>
			<el-table-column
			  label="商品描述"
			  :show-overflow-tooltip="true"
			  prop="buyTime"
			  align="center"
			>
				<template #default="scope">
				  <span v-if="scope.row.productSketch">{{scope.row.productSketch}}</span>
				  <span v-else>-</span>
				</template>
			</el-table-column>
			<el-table-column
			  label="商品规格"
			  :show-overflow-tooltip="true"
			  prop="productSpecs"
			  align="center"
			></el-table-column>
			<el-table-column
			  label="上下架"
			  :show-overflow-tooltip="true"
			  prop="phone"
			  align="center"
			 >
			 <template #default="scope">
			    <el-tag class="ml-2" type="success" v-if="scope.row.isGround==1">已上架</el-tag>
				<el-tag class="ml-2" type="danger" v-else>已下架</el-tag>
			 </template>
			</el-table-column>
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
              width="200"
            >
              <template #default="scope">
				<el-button plain size="default" type="text" @click="handleUpdate(scope.row)">编辑</el-button>
				<el-divider direction="vertical"></el-divider>
                <el-button plain size="default" type="text" @click="handledetails(scope.row)">查看</el-button>
				<el-divider direction="vertical"></el-divider>
				<el-button plain size="default" type="text" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <Pagination
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="pagination"
          />
        </el-col>
        <!-- 表格结束 -->
      </el-row>
    </div>
    <!-- 主页面结束 -->
  </div>
</template>

<script>
//API接口
import api from "@/api";
//引入消息弹出框
import { ElMessageBox, ElMessage } from "element-plus";
//分页
import Pagination from "@/components/Pagination/index.vue";

export default {
  components: { Pagination },
  /**
   * 定义变量
   */
  data() {
    return {
      form: {}, //表单
      isShow: true, //控制按钮状态
      value: "", //获取路由携带参数
      loading: false, //加载状态
      multiple: true, //控制头部删除按钮状态
      tableList: [], //表格列表
      total: 0, //总条目数
      isType: "add", //定义表单弹框的类型
      queryParams: {
        //查询参数
        pageNum: 1,
        pageSize: 10
      }
    };
  },
  /**
   * 初始化函数
   */
  created() {
    //获取路由参数
    let params = this.$route.query;
    //动态获取路由参数的key值
    this.queryParams = { ...this.queryParams, ...params };
  },
  /**
   * 挂载函数
   */
  mounted() {
    //调用表格数据方法
    this.getList();
  },
  /**
   * 方法
   */
  methods: {
    /*
     * 表格多选框选中数据，按钮状态改变
     */
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.multiple = !selection.length;
    },
    /**
     * 获取分页参数
     */
    pagination({ page, limit }) {
      this.queryParams.pageNum = page;
      this.queryParams.pageSize = limit;
      this.getList();
    },
    /**
     * 重置表单
     */
    resetQuery() {
      this.$refs.queryForm.resetFields();
      this.getList();
    },
    /**
     * 查询方法
     */
    handleQuery() {
      //设置默认进入第一页
      this.queryParams.pageNum = 1;
      //获取列表数据
      this.getList();
    },
    /**
     * 获取表格列表
     */
    async getList() {
      //设置Loding状态
      this.loading = true;
      //调用列表查询接口
      api.product.list(this.queryParams).then(res => {
        //判断返回状态
        if (res.code) {
          //设置列表数据
          this.tableList = res.data.records;
          //设置总条目数
          this.total = res.data.total;
        } else {
          this.$message.error(res.msg);
        }
        //loading结束
        this.loading = false;
      });
    },
    /**
     * 删除数据
     * @param {Object} node
     */
    handleDelete(node) {
      ElMessageBox.confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          //调用删除接口
          api.productType
            .del({id:node.id})
            .then(res => {
              //重新获取列表
              this.getList();
              //弹出提示
              ElMessage({
                type: "success",
                message: "删除成功!"
              });
            })
            .catch(err => {
              ElMessage({
                type: "error",
                message: "删除失败!"
              });
            });
        })
        .catch(err => {
          ElMessage({
            type: "error",
            message: "已取消!"
          });
        });
    },
    /**
     * 添加
     */
    handleAdd() {
      this.$router.push("/productFormModal");
    },
    /**
     * 编辑
     */
    handleUpdate(row) {
      this.isType = "edit"; //根据状态判断是否请求详情接口
      this.$router.push({
        path: "/productFormModal",
        query: { id: row.id, isType: this.isType }
      });
    },
    /**
     * 详情
     */
    handledetails(row, type) {
      this.isType = "details"; //根据状态判断是否请求详情接口
      this.$router.push({
        path: "/productFormModal",
        query: { type: type, id: row.id, isType: this.isType }
      });
    }
  }
};
</script>

<style lang="less" scoped></style>
